<template>
	<view class="app">
		<view class="price-box">
			<text>支付金额</text>
			<text class="price">{{ this.totalFee }}</text>
		</view>

		<view class="pay-type-list">

			<view class="type-item b-b">
				<text class="icon yticon icon-alipay"></text>
				<view class="con">
					<text class="tit">支付宝支付</text>
				</view>
			</view>

		</view>

		<text class="mix-btn" @click="pay">确认支付</text>
	</view>
</template>

<script>

export default {
  data() {
    return {
      orderId: undefined,
      totalFee: 0, // 支付金额
      orderInfo: {} // 订单信息
    };
  },
  onLoad(options) {
    this.orderId = options.orderId; // 从URL参数中获取订单ID
    this.totalFee = options.totalFee;
    // this.loadOrderInfo(); // 加载订单信息
  },
  methods: {
    async pay() {
      try {
        // 调用支付接口
        console.log("this.orderId",this.orderId)
        const paymentResult = await uni.request({
          url: `http://localhost:8080/app/api/pay?orderId=${this.orderId}`,
          method: 'POST',
        });

        console.log("支付返回结果：",paymentResult)
        if (paymentResult[1].statusCode === 200) {

          // 解析并提交支付宝表单
          this.handlePayForm(paymentResult[1].data);

          // 跳转到订单详情页面
          // uni.redirectTo({
          //   url: '/pages/order/detail'
          // });
        } else {
          uni.showToast({
            title: '支付失败或订单不存在',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.showToast({
          title: '支付失败或订单不存在',
          icon: 'none'
        });
      }
    },
    // 处理支付宝支付表单并跳转
    handlePayForm(formData) {

      console.log("处理支付宝表单：",formData)
      // 动态创建一个临时的 div 元素来解析表单
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = formData;

      // 获取表单元素
      const form = tempDiv.querySelector('form');
      if (form) {
        // 将表单添加到页面
        document.body.appendChild(form);
        // 手动提交表单，跳转到支付宝支付页面
        form.submit();
      } else {
        uni.showToast({
          title: '支付表单解析失败',
          icon: 'none',
          duration: 2000
        });
      }
    }
  }
};
</script>

<style lang='scss'>
	.app {
		width: 100%;
	}

	.price-box {
		background-color: #fff;
		height: 265upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #909399;

		.price{
			font-size: 50upx;
			color: #303133;
			margin-top: 12upx;
			&:before{
				content: '￥';
				font-size: 40upx;
			}
		}
	}

	.pay-type-list {
		margin-top: 20upx;
		background-color: #fff;
		padding-left: 60upx;

		.type-item{
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position:relative;
		}

		.icon{
			width: 100upx;
			font-size: 52upx;
		}
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
		.icon-weixinzhifu {
			color: #36cb59;
		}
		.icon-alipay {
			color: #01aaef;
		}
		.tit{
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}
		.con{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 80upx auto 30upx;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}

</style>
